﻿<script lang="ts">
export default {
	name: "satellite"
};
</script>

<script setup lang="ts">
import {
	getSatellitePage,
  addOrUpdate,
  reRestartToServer
} from "@/api/satellite";

import { SatellitePageVO, SatelliteForm, SatelliteQuery } from "@/api/satellite/types";

const queryFormRef = ref(ElForm);
const deviceFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<SatelliteQuery>({
	pageNum: 1,
	pageSize: 10,
	mac: ''
});

const deviceList = ref<SatellitePageVO[]>();

const dialog = reactive<DialogOption>({
	visible: false
});

const configDialog = reactive<DialogOption>({
	visible: false
});

const formData = reactive<SatelliteForm>({
  id: "",
	mac: "",
	server: "",
  port: '',
  mobile: ''
});

const rules = reactive({
	mac: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
  server: [{ required: true, message: "请输入服务器IP", trigger: "blur" }],
  port: [{ required: true, message: "请输入服务器端口", trigger: "blur" }]
});


interface CheckedDevice {
	id?: string;
	mac?: string;
}

let checkedDevice: CheckedDevice = reactive({});

/**
 * 查询
 */
function handleQuery() {
	loading.value = true;
	getSatellitePage(queryParams)
		.then(({ data }) => {
			deviceList.value = data.list;
			total.value = data.total;
		})
		.finally(() => {
			loading.value = false;
		});
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageNum = 1;
	handleQuery();
}

/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: any) => item.id);
}
function reRestart(data?:string){
	console.log(data.mac)
	reRestartToServer(data.mac);
}

/**
 * 打开设备表单弹窗
 *
 * @param deviceId
 */
function openDialog(data?: number) {
	dialog.visible = true;
	if (data) {
		dialog.title = "修改设备";
		// getDeviceForm(deviceId).then(({ data }) => {
			Object.assign(formData, data);
		// });
	} else {
		dialog.title = "新增设备";
	}
}

/**
 * 设备表单提交
 */
function handleSubmit() {
	loading.value = true;
	deviceFormRef.value.validate((valid: any) => {
		if (valid) {
			const deviceId = formData.id;
			if (deviceId) {
				addOrUpdate(formData)
					.then(() => {
						ElMessage.success("修改成功");
						closeDialog();
						resetQuery();
					})
					.finally(() => (loading.value = false));
			} else {
				addOrUpdate(formData)
					.then(() => {
						ElMessage.success("新增成功");
						closeDialog();
						resetQuery();
					})
					.finally(() => (loading.value = false));
			}
		}
	});
}

/**
 * 设备配置表单提交
 */
function handleConfigSubmit() {
	loading.value = true;
	const deviceId = configData.deviceId;

	updateDeviceConfig(deviceId, configData)
		.then(() => {
			ElMessage.success("修改配置成功");
			closeConfigDialog();
			resetQuery();
		})
		.finally(() => (loading.value = false));
}

/**
 * 关闭弹窗
 */
function closeDialog() {
	dialog.visible = false;
	resetForm();
}


/**
 * 关闭弹窗
 */
function closeConfigDialog() {
	configDialog.visible = false;
	resetConfigForm();
}

/**
 * 重置表单
 */
function resetForm() {
	deviceFormRef.value.resetFields();
	deviceFormRef.value.clearValidate();

	formData.id = undefined;

}

/**
 * 重置表单
 */
function resetConfigForm() {


}

onMounted(() => {
	handleQuery();
});

</script>

<template>
	<div class="app-container">
		<div class="search">
			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item prop="mac" label="设备imei">
					<el-input
						v-model="queryParams.mac"
						placeholder="设备imei"
						clearable
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery"
					>
						<i-ep-search />
						搜索
					</el-button
					>
					<el-button @click="resetQuery">
						<i-ep-refresh />
						重置
					</el-button>
				</el-form-item>
			</el-form>
		</div>

		<el-card shadow="never">
			<template #header>
				<el-button type="success" @click="openDialog()"
				>
					<i-ep-plus />
					新增
				</el-button
				>

			</template>

			<el-table
				ref="dataTableRef"
				v-loading="loading"
				:data="deviceList"
				@selection-change="handleSelectionChange"
				highlight-current-row
				border
			>
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="设备Id" prop="id" min-width="100" />
				<el-table-column label="设备名称" prop="name" min-width="100" />
				<el-table-column label="imei" prop="mac" width="250" />
				<el-table-column label="服务器IP" prop="server" width="200" />
				<el-table-column label="服务器端口" prop="port" width="200" />
				<el-table-column label="手机卡" prop="mobile" width="200" />
				<el-table-column fixed="right" label="操作" width="220">
					<template #default="scope">
						<el-button
							type="primary"
							size="small"
							link
							@click="openDialog(scope.row)"
						>
							<i-ep-edit />
							编辑
						</el-button>
						<el-button
                    		type="primary"
                    		size="small"
                    	@click="reRestart(scope.row)"
                    	>
                    	<i-ep-edit />
                    			重启
                    	</el-button>
					</template>
					
				</el-table-column>
			</el-table>

			<pagination
				v-if="total > 0"
				v-model:total="total"
				v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize"
				@pagination="handleQuery"
			/>
		</el-card>

		<!-- 设备表单弹窗 -->

		<el-dialog
			:title="dialog.title"
			v-model="dialog.visible"
			width="500px"
			@close="closeDialog"
		>
			<el-form
				ref="deviceFormRef"
				:model="formData"
				:rules="rules"
				label-width="100px"
			>
			<el-form-item label="imei" prop="mac">
            					<el-input v-model="formData.name" placeholder="请输入设备名称" />
            				</el-form-item>
				<el-form-item label="设备名称" prop="mac">
					<el-input v-model="formData.mac" placeholder="请输入设备编码" />
				</el-form-item>

        <el-form-item label="server" prop="server">
					<el-input v-model="formData.server" placeholder="请输入服务器IP" />
				</el-form-item>

        <el-form-item label="port" prop="port">
					<el-input v-model="formData.port" placeholder="请输入服务器端口" />
				</el-form-item>
				<el-form-item label="mobile" prop="mobile">
					<el-input v-model="formData.mobile" placeholder="请输入卡手机号" />
				</el-form-item>

			</el-form>
		

			


			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="handleSubmit">确 定</el-button>
					<el-button @click="closeDialog">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
